<template>
  <div class="whole wholeReport">
    <div class="crumbs">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index + 1 < $route.matched.length">{{
              item.meta.title
            }}</span>
          <router-link
              v-if="index + 1 == $route.matched.length"
              :to="item.path"
          >{{ item.meta.title }}
          </router-link
          >
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div v-if="addShow" class="addDistributed">
      <a-button :class="butAdmin" class="userAbut" type="primary" @click="addDistributed"
      >+新建
      </a-button
      >
    </div>
    <a-table
        :class="TableAdmin"
        :columns="columns"
        :data-source="reportList"
        :pagination="pagination"
        class="ReportTable"
        rowKey="id"
    >
      <span v-if="record.isUse == 1" slot="isUse" slot-scope="text, record" class="ReportTableOperate">
        <span class="ReportTableStatus1"></span>使用中
      </span>
      <span v-else slot="isUse" class="ReportTableOperate">
        <span class="ReportTableStatus"></span>未使用
      </span>
      <span slot="num" slot-scope="text, record, index">
        {{
          (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <template slot="operations" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="deleteShow">
            <a-popconfirm
                v-if="reportList.length"
                title="确认删除?"
                @confirm="() => Delete(record.id)"
            >
              <a href="javascript:;" title="删除">
                <a-icon style="color: red; fontsize: 16px" type="delete"/>
              </a>
            </a-popconfirm>
          </span>
          <span class="jiange"></span>
          <span v-if="editShow">
            <a title="编辑" @click="edit(record.id)">
              <a-icon style="color: #7a7d7e; fontsize: 16px" type="edit"/>
            </a>
          </span>
          <span class="jiange"></span>
          <div v-if="useShow" class="useDiv">
            <span v-if="record.isUse == 0" @click="reportlsUse(record.id)">
              <a href="javascript:;" title="使用模板">
                <a-icon style="color: #7a7d7e; fontsize: 16px" type="tool"/>
              </a>
            </span>
            <span v-if="record.isUse == 1" @click="CancelUse(record.id)">
              <a href="javascript:;" title="取消使用">
                <a-icon style="color: #7a7d7e; fontsize: 16px" type="tool"/>
              </a>
            </span>
          </div>

        </div>
      </template>
    </a-table>
    <div v-show="Loading" class="Loading">
      <a-spin tip="Loading..."></a-spin>
    </div>
    <!-- 添加 -->
    <div ref="aModalReport" class="aModalReport">
      <a-modal
          v-model="addVisible"
          :getContainer="() => $refs.aModalReport"
          :mask="false"
          :maskClosable="false"
          title="添加报告配置"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeAddReport">添加</a-button>
          <a-button :class="TableButReset" class="butReset" @click="closeReturnReset">重置</a-button>
        </template>
        <a-form-model
            ref="ruleForm"
            :label-col="labelCol1"
            :model="formModel"
            :rules="rules"
            :wrapper-col="wrapperCol1"
            hideRequiredMark
        >
          <a-form-model-item ref="reportName" label="名称" prop="reportName">
            <a-input
                v-model="formModel.reportName"
                @blur="
                () => {
                  $refs.reportName.onFieldBlur();
                }
              "
            />
          </a-form-model-item>

          <a-form-model-item ref="password" label="密码" prop="password">
            <a-input-password
                v-model="formModel.password"
                :visibilityToggle='false'
            />
          </a-form-model-item>

          <div class="reportTitle">
            <span class="left"></span>
            <span class="center" style="cursor: pointer;" @click="addBasicsDeploy"
            >添加基础信息配置</span
            >
            <span class="right"></span>
          </div>

          <a-table
              :columns="columns1"
              :data-source="addBasicsList"
              :pagination="false"
              class="aTable"
              rowKey="configId"
              style="width: 100%"
          >
            <template slot="operations" slot-scope="text, record">
              <div class="editable-row-operations">
                <span>
                  <a-popconfirm
                      v-if="addBasicsList.length"
                      title="确认删除?"
                      @confirm="() => aModalReportDelete(record.configId)"
                  >
                    <a href="javascript:;" title="删除">
                      <a-icon
                          style="color: red; fontsize: 16px"
                          type="delete"
                      />
                    </a>
                  </a-popconfirm>
                </span>
                <span class="jiange"></span>
                <span>
                  <a href="javascript:;" title="编辑" @click="aModalReportEdit(record)">
                    <a-icon
                        style="color: #7a7d7e; fontsize: 16px"
                        type="edit"
                    />
                  </a>
                </span>
              </div>
            </template>
          </a-table>

          <div class="reportTitle">
            <span class="left"></span>
            <span class="center">图片资料布局</span>
            <span class="right"></span>
          </div>

          <div class="moreGongGe">
            <a-radio-group v-model="imgMore" @change="radioOnChangeAdd">
              <a-radio class="one" value="1">
                <img
                    v-if="imgMore == 1"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/one.png"/>
              </a-radio>
              <a-radio class="two" value="2">
                <img
                    v-if="imgMore == 2"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/two.png"/>
              </a-radio>
              <a-radio class="three" value="3">
                <img
                    v-if="imgMore == 3"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/four.png"/>
              </a-radio>
              <a-radio class="four" value="4">
                <img
                    v-if="imgMore == 4"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/six.png"/>
              </a-radio>
              <a-radio class="five" value="5">
                <img
                    v-if="imgMore == 5"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/nine.png"/>
              </a-radio>
            </a-radio-group>
          </div>
          <div class="reportTitle">
            <span class="left"></span>
            <span class="center">视频资料布局</span>
            <span class="right"></span>
          </div>

          <div class="moreGongGe1">
            <a-radio-group
                v-model="videoMore"
                @change="radioVideoMoreOnChangeAdd"
            >
              <a-radio class="one" value="1">
                <img
                    v-if="videoMore == 1"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/one.png"/>
              </a-radio>
              <a-radio class="two" value="2">
                <img
                    v-if="videoMore == 2"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/two.png"/>
              </a-radio>
              <a-radio class="three" value="3">
                <img
                    v-if="videoMore == 3"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/four.png"/>
              </a-radio>
              <a-radio class="four" value="4">
                <img
                    v-if="videoMore == 4"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/six.png"/>
              </a-radio>
              <a-radio class="five" value="5">
                <img
                    v-if="videoMore == 5"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/nine.png"/>
              </a-radio>
            </a-radio-group>
          </div>
        </a-form-model>
      </a-modal>
    </div>
    <!-- 编辑 -->
    <div ref="aModalReport1" class="aModalReport1">
      <a-modal
          v-model="editVisible"
          :getContainer="() => $refs.aModalReport1"
          :mask="false"
          :maskClosable="false"
          title="编辑报告配置"
      >
        <template slot="footer">
          <a-button :class="TableButSave" class="butSave" @click="closeEditReport">提交</a-button>
          <a-button :class="TableButReset" class="butReset" @click="closeReturnReset">重置</a-button>
        </template>

        <a-form-model
            ref="ruleForm"
            :label-col="labelCol1"
            :model="formModel"
            :rules="rules"
            :wrapper-col="wrapperCol1"
            hideRequiredMark
        >
          <a-form-model-item ref="reportName" label="名称" prop="reportName">
            <a-input
                v-model="formModel.reportName"
                @blur="
                () => {
                  $refs.reportName.onFieldBlur();
                }
              "
            />
          </a-form-model-item>
          <a-form-model-item ref="password" label="密码" prop="password">
            <a-input-password
                v-model="formModel.password"
                :visibilityToggle='false'
            />
          </a-form-model-item>

          <div class="reportTitle">
            <span class="left"></span>
            <span class="center" style="cursor: pointer;" @click="addBasicsDeploy"
            >添加基础信息配置</span
            >
            <span class="right"></span>
          </div>

          <a-table
              :columns="columns1"
              :data-source="addBasicsList"
              :pagination="false"
              class="aTable"
              rowKey="id"
              style="width: 100%"
          >
            <template slot="operations" slot-scope="text, record">
              <div class="editable-row-operations">
                <span>
                  <a-popconfirm
                      v-if="addBasicsList.length"
                      title="确认删除?"
                      @confirm="() => aModalReportDelete(record.configId)"
                  >
                    <a href="javascript:;" title="删除">
                      <a-icon
                          style="color: red; fontsize: 16px"
                          type="delete"
                      />
                    </a>
                  </a-popconfirm>
                </span>
                <span class="jiange"></span>
                <span>
                  <a href="javascript:;" title="编辑" @click="aModalReportEdit(record)">
                    <a-icon
                        style="color: #7a7d7e; fontsize: 16px"
                        type="edit"
                    />
                  </a>
                </span>
              </div>
            </template>
          </a-table>

          <div class="reportTitle">
            <span class="left"></span>
            <span class="center">图片资料布局</span>
            <span class="right"></span>
          </div>

          <div class="moreGongGe">
            <a-radio-group v-model="imgMore" @change="radioOnChangeAdd">
              <a-radio class="one" value="1">
                <img
                    v-if="imgMore == 1"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/one.png"/>
              </a-radio>
              <a-radio class="two" value="2">
                <img
                    v-if="imgMore == 2"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/two.png"/>
              </a-radio>
              <a-radio class="three" value="3">
                <img
                    v-if="imgMore == 3"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/four.png"/>
              </a-radio>
              <a-radio class="four" value="4">
                <img
                    v-if="imgMore == 4"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/six.png"/>
              </a-radio>
              <a-radio class="five" value="5">
                <img
                    v-if="imgMore == 5"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/nine.png"/>
              </a-radio>
            </a-radio-group>
          </div>
          <div class="reportTitle">
            <span class="left"></span>
            <span class="center">视频资料布局</span>
            <span class="right"></span>
          </div>

          <div class="moreGongGe1">
            <a-radio-group
                v-model="videoMore"
                @change="radioVideoMoreOnChangeAdd"
            >
              <a-radio class="one" value="1">
                <img
                    v-if="videoMore == 1"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/one.png"/>
              </a-radio>
              <a-radio class="two" value="2">
                <img
                    v-if="videoMore == 2"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/two.png"/>
              </a-radio>
              <a-radio class="three" value="3">
                <img
                    v-if="videoMore == 3"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/four.png"/>
              </a-radio>
              <a-radio class="four" value="4">
                <img
                    v-if="videoMore == 4"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/six.png"/>
              </a-radio>
              <a-radio class="five" value="5">
                <img
                    v-if="videoMore == 5"
                    alt=""
                    class="checkedMore"
                    src="../../../images/SystemLayout/selecd.png"
                />
                <img alt="" src="../../../images/SystemLayout/nine.png"/>
              </a-radio>
            </a-radio-group>
          </div>
        </a-form-model>

      </a-modal>
    </div>

    <!-- 添加基础信息配置 -->
    <div ref="aModalReport2" class="aModalReport2">
      <a-modal
          v-model="addBasicsVisible"
          :getContainer="() => $refs.aModalReport2"
          :mask="false"
          :maskClosable="false"
          title="添加报告配置"
      >
        <template slot="footer">
          <a-button class="butSave" @click="addBasicsReport">添加</a-button>
          <a-button class="butReset" @click="addBasicsreturn">返回</a-button>
        </template>

        <a-table
            :columns="addBasicsColumns"
            :data-source="addBasicsData"
            :pagination="false"
            :row-selection="rowSelection"
            rowKey="id"
            class="addBasicsAtable"
        >
        </a-table>
      </a-modal>
    </div>
    <!-- 编辑基础信息配置 -->
    <div ref="aModalReport3" class="aModalReport3">
      <a-modal
          v-model="editBasicsVisible"
          :getContainer="() => $refs.aModalReport3"
          :mask="false"
          :maskClosable="false"
          title="编辑报告配置"
      >
        <template slot="footer">
          <a-button class="butSave" @click="editBasicsReport">提交</a-button>
          <a-button class="butReset" @click="editBasicsreturn">返回</a-button>
        </template>

        <a-form :form="form" class="addForm" hideRequiredMark>
          <a-form-item class="aFormItem" label="展示内容名称" v-bind="formItemLayout">
            <a-input
                v-decorator="[
            'showName',
            {
              rules: [
                {
                  required: true,
                  message: '请输入展示内容名称',
                },
              ],
            },
          ]"
            />
          </a-form-item>

          <a-form-item class="aFormItem" label="排序号" v-bind="formItemLayout">
            <a-input
                v-decorator="[
            'sortCode',
            {
              rules: [
                {
                  required: true,
                  message: '请输入排序号',
                },
              ],
            },
          ]"
            />
          </a-form-item>

        </a-form>

      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import api from '../../api/report/report.js'

export default {
  data() {
    return {
      imgMore: "1",
      videoMore: "1",
      Loading: false,
      centerInp: "",
      startTimeApply: "",
      endTimeApply: "",
      reportList: [],
      formItemLayout: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 8},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      },
      rangeConfig: {
        rules: [
          {type: "array", required: false, message: "Please select time!"},
        ],
      },

      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: {customRender: "num"},
          width: 78,
        },
        {
          title: "名称",
          dataIndex: "reportName",
          scopedSlots: {customRender: "reportName"},
          width: 130,
        },
        {
          title: "使用状态",
          dataIndex: "isUse",
          scopedSlots: {customRender: "isUse"},
          width: 78,
        },
        {
          title: "操作时间",
          dataIndex: "createTime",
          scopedSlots: {customRender: "createTime"},
          width: 100,
          customRender: (text, row, index) => {
            return moment(text).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          title: "操作",
          dataIndex: "operations",
          scopedSlots: {customRender: "operations"},
          width: 78,
        },
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: (current) => this.onSizeChange(current),
        onChange: (current, pageSize) => this.onPageChange(current, pageSize),
      },
      systForm: {},
      addVisible: false,
      editVisible: false,
      addBasicsVisible: false,
      editBasicsVisible: false,
      permsShow: false,
      addShow: false,
      deleteShow: false,
      useShow: false,
      editShow: false,
      // 编辑的回显数据
      editEchoData: {},
      value: 1,
      configId: '',
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
      labelCol1: {span: 4},
      wrapperCol1: {span: 14},

      columns1: [
        {
          title: "展示内容名称",
          dataIndex: "showName",
          scopedSlots: {customRender: "showName"},
          width: 150,
        },
        {
          title: "排序号",
          dataIndex: "sortCode",
          scopedSlots: {customRender: "sortCode"},
          width: 150,
        },
        {
          title: "操作",
          dataIndex: "operations",
          scopedSlots: {customRender: "operations"},
          width: 100,
        },
      ],
      // 添加基础信息配置
      addBasicsColumns: [
        {
          title: "展示内容名称",
          dataIndex: "showName",
          width: "60%",
        },
        {
          title: "排序码",
          dataIndex: "sortCode",
          width: "30%",
        }
      ],
      // 已选中的报告基础信息配置列表
      addBasicsList: [],
      addBasicsSelectedRows: [],
      addBasicsData: [],
      rowSelection: {
        selectedRowKeys: [],
        onChange: (selectedRowKeys, selectedRows) => {
          this.rowSelection.selectedRowKeys = selectedRowKeys
          this.addBasicsSelectedRows = selectedRows;
        },
      },
      formModel: {
        reportName: '',
        password: ''
      },
      rules: {
        reportName: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ]
      },
      TableAdmin: 'TableAdmin',
      butAdmin: 'butAdmin',
      TableButSave: 'TableButSave',
      TableButReset: 'TableButReset',
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: "time_related_controls"});
  },
  created() {
    this.getReportList()
    let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    this.isShow(userInfo);
  },
  mounted() {
    let _this = this;
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.TableAdmin = 'TableAdmin';
        _this.butAdmin = 'butAdmin';
        _this.TableButSave = 'TableButSave';
        _this.TableButReset = 'TableButReset';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.TableAdmin = 'TableAdmin1';
        _this.butAdmin = 'butAdmin1';
        _this.TableButSave = 'TableButSave1';
        _this.TableButReset = 'TableButReset1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.TableAdmin = 'TableAdmin';
      _this.butAdmin = 'butAdmin';
      _this.TableButSave = 'TableButSave';
      _this.TableButReset = 'TableButReset';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.TableAdmin = 'TableAdmin1';
      _this.butAdmin = 'butAdmin1';
      _this.TableButSave = 'TableButSave1';
      _this.TableButReset = 'TableButReset1';
    }
  },
  methods: {
    isShow(userInfo) {
      if (userInfo.permissions.includes("cf:arch:report:add")) {
        this.addShow = true;
      }
      if (userInfo.permissions.includes("cf:arch:report:remove")) {
        this.deleteShow = true;
      }
      if (userInfo.permissions.includes("cf:arch:report:edit")) {
        this.editShow = true;
      }
      if (userInfo.permissions.includes("cf:arch:report:use")) {
        this.useShow = true;
      }
      if (userInfo.permissions.includes("cf:arch:report:cancelUse")) {
        this.useShow = true;
      }
    },
    onPageChange(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.getReportList()
    },
    onSizeChange(current) {
      this.pagination.current = current;
      this.getReportList();
    },
    //报告列表
    getReportList() {
      let _this = this;
      const pageNum = _this.pagination.current;
      const pageSize = _this.pagination.pageSize;
      api.reportGetList(null, { pageNum, pageSize }).then(res => {
        if (res.code == 200) {
          _this.pagination.total = res.data.totalCount;
          _this.reportList = res.data.data;
          _this.reportList.createTime = moment(_this.reportList.createTime).format(
              "YYYY-MM-DD HH:MM:SS"
          );
        }
      })
    },
    // 添加基础信息配置
    addBasicsDeploy() {
      const _this = this
      this.addBasicsVisible = true;
      api.getReportBaseInfoConfig().then(res => {
        if (res.code == 200) {
          _this.addBasicsData = res.data;
          setTimeout(() => {
            const arr = JSON.parse(JSON.stringify(this.addBasicsList))
            const rest = []
            for (const item of arr) {
              rest.push(item['configId'])
            }
            console.log(rest)
            this.rowSelection.selectedRowKeys = rest
            // this.selectedRowsXXA = rest
          }, 100)
        }
      })
    },
    // 添加基础信息配置提交按钮
    addBasicsReport() {
      let arr = JSON.parse(JSON.stringify(this.addBasicsSelectedRows).replace(/id/g, 'configId'))
      this.addBasicsList = arr;
      this.addBasicsVisible = false;
    },
    // 基础信息配置删除
    aModalReportDelete(configId) {
      let addBasicsList = this.addBasicsList;
      let id1 = addBasicsList.findIndex(item => {
        if (item.configId == configId) {
          return true
        }
      })
      addBasicsList.splice(id1, 1)
    },
    // 基础信息配置编辑
    aModalReportEdit(record) {
      this.configId = record.configId;
      this.editBasicsVisible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          showName: record.showName,
          sortCode: record.sortCode,
        });
      })
    },
    // 编辑基础信息配置提交按钮
    editBasicsReport() {
      let _this = this;
      _this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          let addBasicsList = this.addBasicsList;
          addBasicsList.forEach(e => {
            if (e.configId == this.configId) {
              e.showName = values.showName;
              e.sortCode = values.sortCode
              _this.editBasicsVisible = false;
            }

          })
        }
      });
    },
    // 编辑基础信息配置返回按钮
    editBasicsreturn() {
      this.editBasicsVisible = false;
    },
    // 添加基础信息配置返回按钮
    addBasicsreturn() {
      this.addBasicsVisible = false;
    },
    radioOnChangeAdd(e) {
      this.imgMore = e.target.value;
    },
    radioVideoMoreOnChangeAdd(e) {
      this.videoMore = e.target.value;
    },
    radioOnChangeEdit(e) {
      this.imgMoreEdit = e.target.value;
    },
    radioVideoMoreOnChangeEdit(e) {
      this.videoMoreEdit = e.target.value;
    },
    // 使用报告模板
    reportlsUse(reportId) {
      api.ReportlUse(null, reportId).then(res => {
        console.log(res)
        this.$message.success("使用成功");
        this.getReportList()
      })
    },
    // 取消使用报告模板
    CancelUse(reportId) {
      api.ReportCancelUse(null, reportId).then(res => {
        console.log(res)
        this.$message.success("取消成功");
        this.getReportList()
      })
    },
    // 添加报告配置
    addDistributed() {
      let _this = this;
      _this.imgMore = 1;
      _this.videoMore = 1;
      _this.addBasicsList = [];
      _this.formModel.reportName = ''
      _this.formModel.password = ''
      _this.addVisible = true;
    },
    // 删除
    Delete(reportId) {
      let _this = this;
      api.removeReport(null, reportId).then(res => {
        if (res.code == 200) {
          _this.$message.success("删除成功");
          _this.getReportList();
        } else {
          _this.$message.error("删除失败");
          _this.getReportList();
        }
      })
    },
    // 编辑
    edit(reportId) {
      this.editVisible = true;
      this.reportGetInfo(reportId)
    },
    // 获取报告配置信息
    reportGetInfo(reportId) {
      api.getReportInfo(null, reportId).then(res => {
        if (res.code == 200) {
          this.editEchoData = res.data
          console.log(this.editEchoData)
          this.formModel.reportName = this.editEchoData.reportName;
          this.formModel.password = this.editEchoData.password;
          this.addBasicsList = this.editEchoData.list;
          this.imgMore = this.editEchoData.imageLayout;
          this.videoMore = this.editEchoData.videoLayout;
        }
      })
    },
    shadowMousemove() {
      this.permsShow = true;
    },
    shadowMouseout() {
      this.permsShow = false;
    },

    addReturn() {
      this.$router.push("/report");
    },
    onChange(value) {
      console.log("changed", value);
    },
    // 新建报告
    closeAddReport(e) {
      let _this = this;
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          _this.formModel.imageLayout = Number(_this.imgMore);
          _this.formModel.videoLayout = Number(_this.videoMore);
          _this.formModel.list = _this.addBasicsList;
          if (_this.formModel.list.length != 0) {
            api.addReportBase(null, _this.formModel).then(res => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                _this.addVisible = false;
                _this.getReportList()
              } else {
                this.$message.error("添加失败");
                return false;
              }
            })
          } else if (_this.formModel.list.length == 0) {
            this.$message.error("基础信息配置不能为空");
          }
        }
      });
    },
    // 编辑报告
    closeEditReport() {
      let _this = this;
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          _this.formModel.id = this.editEchoData.id;
          _this.formModel.imageLayout = Number(_this.imgMore);
          _this.formModel.videoLayout = Number(_this.videoMore);
          _this.formModel.list = _this.addBasicsList;
          if (_this.formModel.list.length != 0) {
            api.editReportBase(null, _this.formModel).then(res => {
              if (res.code == 200) {
                this.$message.success("编辑成功");
                _this.editVisible = false;
                _this.getReportList()
                _this.closeReturnReset()
              } else {
                this.$message.error("编辑失败");
                return false;
              }
            })
          } else if (_this.formModel.list.length == 0) {
            this.$message.error("基础信息配置不能为空");
          }

        }
      });
    },

    closeReturnReset() {
      let _this = this;
      _this.imgMore = 1;
      _this.videoMore = 1;
      _this.addBasicsList = [];
      this.formModel.reportName = ''
      this.formModel.password = ''
    },
  },
};
</script>

<style lang="scss" scoped>
.whole {
  position: relative;

  .useDiv {
    display: inline-block;
  }

  .Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .crumbs {
    display: flex;
    padding-left: 31px;
    margin-top: 14px;

    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #4d4d4d;
    }

    .ant-breadcrumb > span:last-child a {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #1e7eff;
    }
  }

  .jiange {
    display: inline-block;
    width: 10px;
  }

  .systemForm {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0 20px 25px;
    height: 36px;

    .a_but {
      line-height: 36px;
      font-size: 16px;
      margin-left: 20px;
    }
  }

  .ReportTable {
    margin-left: 25px;
    width: 1560px;
    background: #ffffff;
    border: 1px solid #c4d7e1;
    border-radius: 6px;

    .ReportTableOperate {
      display: flex;
      align-items: center;

      .ReportTableStatus {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #ff9600;
        border-radius: 50%;
        margin-right: 20px;
      }

      .ReportTableStatus1 {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #00bf0c;
        border-radius: 50%;
        margin-right: 20px;
      }
    }
  }

  .addDistributed {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    margin: 10px 0;
    margin-left: 30px;

    .userAbut {
      width: 120px;
      height: 36px;
      border-radius: 30px;
      background-color: #0078b5;
      font-size: 17px;
    }
  }

  .aModalReport,
  .aModalReport1 {
    .addForm {
      margin-top: 20px;
      width: 100%;
      position: relative;

      .surName {
        display: flex;
        justify-content: flex-end;
      }
    }

    .reportTitle {
      width: 474px;
      margin: 0 0 18px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .center {
        font-size: 16px;
        color: #0078b6;
      }

      .left {
        width: 132px;
        height: 1px;
        background-color: #0078b6;
        opacity: 0.5;
      }

      .right {
        width: 132px;
        height: 1px;
        background-color: #0078b6;
        opacity: 0.5;
      }
    }

    .moreGongGe,
    .moreGongGe1 {
      display: flex;
      justify-content: space-between;
      width: 474px;
      margin-left: 10px;

      .one,
      .two,
      .three,
      .four,
      .five {
        position: relative;

        .checkedMore {
          position: absolute;
        }
      }
    }

    .aTable {
      //min-height: 262px;
      overflow: hidden;
      width: 100%;
      background: #fff;
      border-top: 1px solid #d7e2f1;
    }
  }

  .butSave {
    width: 94px;
    height: 30px;
    border-radius: 30px;
    background-color: #0078b5;
    font-size: 16px;
    color: #fff;
    margin-right: 40px;
  }

  .butReset {
    width: 94px;
    height: 30px;
    border-radius: 30px;
    font-size: 16px;
    color: #0376b7;
    border: 1px solid #0376b7;
  }

  .addForm {
    width: 100%;

    .surName {
      display: flex;
      justify-content: flex-end;
    }

    .radioStatus {
      display: flex;
      height: 60px;

      .status {
        float: left;
      }

      .ant-form-item-control {
        line-height: 60px !important;
      }
    }
  }
}
</style>
<style>
.TableAdmin .ant-table-thead > tr > th .ant-table-header-column {
  color: #5a77b1;
}

.TableAdmin1 .ant-table-thead > tr > th .ant-table-header-column {
  color: #238cc3;
}

.TableAdmin .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #5c78aa !important;
  color: #5a77b1 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.TableAdmin1 .ant-table-thead > tr > th {
  background-color: #fff !important;
  border-bottom: 1px solid #238cc3 !important;
  color: #238cc3 !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.ReportTable {
  position: relative !important;
}

.aModalReport .ant-form-item-label,
.aModalReport1 .ant-form-item-label {
  display: flex !important;
  width: 50px !important;
  margin-left: 10px !important;
}

.aModalReport .ant-form-item-label > label,
.aModalReport1 .ant-form-item-label > label {
  color: #747474;
}

.aModalReport .ant-input,
.aModalReport1 .ant-input {
  width: 425px !important;
}

.aModalReport .has-error .ant-form-explain, .aModalReport .has-error .ant-form-split {
  display: flex !important;
  justify-content: flex-start !important;
}

.aModalReport1 .has-error .ant-form-explain, .aModalReport1 .has-error .ant-form-split {
  display: flex !important;
  justify-content: flex-start !important;
}

.aModalReport .ant-row.ant-form-item,
.aModalReport1 .ant-row.ant-form-item {
  width: 474px !important;
  margin-bottom: 0 !important;
  height: 60px !important;
}

.aModalReport .aTable,
.aModalReport1 .aTable {
  position: relative !important;
  overflow-y: auto !important;
  height: 280px !important;
}

.aModalReport .ant-table table,
.aModalReport1 .ant-table table {
  width: 474px !important;
}

.aModalReport .ant-table-body,
.aModalReport1 .ant-table-body {
  border: none !important;
  width: 474px !important;
}

.aModalReport .ant-spin-nested-loading,
.aModalReport1 .ant-spin-nested-loading {
  width: 474px !important;
}

.aModalReport .ant-spin-container,
.aModalReport1 .ant-spin-container {
  width: 474px !important;
}

.aModalReport .ant-table-thead,
.aModalReport1 .ant-table-thead {
  width: 474px !important;
}

.aModalReport .ant-table-thead > tr > th,
.aModalReport1 .ant-table-thead > tr > th {
  width: 474px !important;
  background-color: #fff !important;
  border-bottom: 1px solid #d7e2f1 !important;
  color: #5d77ad !important;
  font-size: 16px !important;
}

.aModalReport .ant-table-tbody > tr,
.aModalReport1 .ant-table-tbody > tr {
  width: 474px !important;
  border-bottom: 1px solid #d7e2f1 !important;
}

.aModalReport .ant-spin-nested-loading,
.aModalReport1 .ant-spin-nested-loading {
  width: 474px !important;
  margin: 0 auto !important;
}

.aModalReport .ant-modal-content,
.aModalReport1 .ant-modal-content {
  width: 540px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
}

.aModalReport .ant-modal-body,
.aModalReport1 .ant-modal-body {
  padding-top: 20px !important;
  height: 710px !important;
  /* overflow-y: auto !important;
  overflow-x: hidden !important; */
}

.aModalReport2 .ant-modal-body {
  height: 500px !important;
  /* overflow-y: auto !important;
  overflow-x: hidden !important; */
}

.aModalReport .moreGongGe .ant-radio,
.aModalReport .moreGongGe1 .ant-radio {
  display: none !important;
}

.aModalReport1 .moreGongGe .ant-radio,
.aModalReport1 .moreGongGe1 .ant-radio {
  display: none !important;
}

.aModalReport .moreGongGe .ant-radio-group,
.aModalReport .moreGongGe1 .ant-radio-group {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}

.aModalReport1 .moreGongGe .ant-radio-group,
.aModalReport1 .moreGongGe1 .ant-radio-group {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}

.aModalReport2 .addBasicsAtable.ant-table-wrapper .ant-table {
  width: 440px !important;
  overflow: hidden !important;
}

.aModalReport2 .ant-modal-body {
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.aModalReport2 .ant-modal-wrap,
.aModalReport3 .ant-modal-wrap {
  overflow: hidden !important;
}

.aModalReport2 .ant-modal-content,
.aModalReport3 .ant-modal-content {
  width: 440px !important;
  margin: 0 auto !important;
  margin-top: 60px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6) !important;
}

.aModalReport3 .addForm.ant-form.ant-form-horizontal.ant-form-hide-required-mark, .aModal1 .addForm.ant-form.ant-form-horizontal.ant-form-hide-required-mark {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.aModalReport3 .ant-form-item-label {
  display: flex !important;
  width: 100px !important;
  margin-left: -5px;
}

.aModalReport3 .ant-input {
  height: 36px !important;
}

.aModalReport3 .ant-form-item-control {
  width: 300px !important;
}

.aModalReport3 #register_remark {
  height: 200px !important;
}

.aModalReport3 .aFormItem.ant-row.ant-form-item {
  margin-bottom: 0 !important;
  height: 60px !important;
}

.aModalReport .ant-modal-title,
.aModalReport1 .ant-modal-title,
.aModalReport2 .ant-modal-title,
.aModalReport3 .ant-modal-title {
  display: flex !important;
}

.aModalReport .ant-table-empty .ant-table-body, .aModalReport1 .ant-table-empty .ant-table-body {
  overflow: hidden !important;
}
</style>
